<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

<script>
  console.log('VueRuntimeDOM:',VueRuntimeDOM)

  const {createApp,h} = VueRuntimeDOM;

  const App = {
    props:{
      name:String
    },
    setup(props/*←todo 源码里是会剔除我们上面props接受的, 剔除的会放在我们这里的context.attrs里*/,context){
      console.log('setup ok');
      console.log('setup props:',props,'setup context:',context);

      //注意区分通过 getCurrentInstance得到instance 和 这里接受的context 不是一个东西
      //context 是其子集

      /*return {
        a:1,
        b:2
      }*/

      /** ↓如果返回的是一个函数 它就会作为App.render (比我们下面写的App.render优先级高)*/
      return (proxy)=>{
        console.log('setup里返回的render');

        /** h 内部调用的还是createVNode, 只是h接受的参数形式可以有很多中, 做了些兼容处理*/
        // h('div',{a:1,b:2})
        // h('div','hello world')
        // h('div',{a:1,b:2},'hello world')
        // h('div',{},['p','span', h()])
        // h('div',{},'p','span')

        // return h('div',{style:'color:red;',onClick:()=>alert(1)},'hello world')
        // return h('div',{style:'color:red;',onClick:()=>alert(1)},['hello world','  ahhh'])
        return h('div',{style:'color:red;',onClick:()=>alert(1)},['hello world','  ahhh',h('span',{style:{color:'green'}},'!')])
      }
    },

    render(proxy){ //是个effect函数 数据更新 需要重新渲染
      console.log('render');
      console.log('proxy:',proxy);
      console.log('proxy.name:',proxy.name); //ahhh
      console.log('proxy.age:',proxy.age); //123
      console.log('proxy.a:',proxy.a); //1
      console.log('proxy.b:',proxy.b); //2

      // return h('div',{},'hello world')
    }
  }

  const app/* app不是根组件实例,它就是个选项对象,存放着我们createApp传递的数据(详情见apiCreateApp) */ = createApp(App, {name:'ahhh',age:123})
  const p/*← 这个proxy对象就是根组件实例对应的代理对象*/ = app.mount('#app')
</script>
</body>
</html>
